<template>
    <div style="flex: 1;background-color: #ffffff">
        <div style="height: 50px;width: 750px;background-color: #01A65A;"></div>
        <div class="bar-middle">
            <div @click="change(0)" :class="['bar-middle-btn','first-btn', _activeTab == 0 ?'active':'']">
                <text :class="['tab-text',_activeTab == 0 ?'active-text':'']">人员</text>
            </div>
            <div @click="change(1)" :class="['bar-middle-btn','second-btn', _activeTab == 1 ?'active':'']">
                <text :class="['tab-text',_activeTab == 1 ?'active-text':'']">部门</text>
            </div>
            <div @click="change(2)" :class="['bar-middle-btn','third-btn', _activeTab == 2 ?'active':'']">
                <text :class="['tab-text',_activeTab == 2 ?'active-text':'']">职位</text>
            </div>
        </div>


        <host style="flex: 1" @change="onchange" :page="activeTab">
            <!--<child style="background-color: red;display: flex">-->
            <div class="tab" @load="load" @show="show">
                <wxc-searchbar ref="wxc-searchbar" v-if="_activeTab == 0"
                               @wxcSearchbarCancelClicked="wxcSearchbarCancelClicked"
                               @wxcSearchbarInputOnInput="wxcSearchbarInputOnInput"></wxc-searchbar>
                <wxc-indexlist :normal-list="sourceData"
                               @wxcIndexlistItemClicked="wxcIndexlistItemClicked"
                               :show-index="showIndex" v-if="_activeTab == 0"></wxc-indexlist>
            </div>

            <div class="tab">
                <wxc-indexlist :normal-list="sectionData"
                               @wxcIndexlistItemClicked="showSectionUserList"
                               :show-index="showIndex" v-if="_activeTab == 1"></wxc-indexlist>
            </div>
            <div class="tab">
                <wxc-indexlist :normal-list="positonData"
                               @wxcIndexlistItemClicked="showPositionUsrList"
                               :show-index="showIndex" v-if="_activeTab == 2"></wxc-indexlist>
            </div>
        </host>


        <wxc-popup popup-color="#f2f3f4"
                   :show="isSectionPropShow"
                   @wxcPopupOverlayClicked="popupOverSectionClick"
                   pos="right">
            <div class="detail-container">
                <head-bar height="80"  :leftClick="popupOverSectionClick"></head-bar>
                <list :style="{height:scrollerHeight}">
                    <cell v-for="item in sectionList">
                        <div @click="toUserInfo(item)" style="justify-content: center;align-items: flex-start;padding-left: 20px;height: 80px;border-bottom-width: 1px;border-bottom-color: #e2e2e2;">
                            <text style="font-size: 30px;">{{item.name}}</text>
                        </div>
                    </cell>
                </list>

            </div>
        </wxc-popup>


        <wxc-popup popup-color="#f2f3f4"
                   :show="isPositionPropShow"
                   @wxcPopupOverlayClicked="popupOverPositonClick"
                   pos="right">
            <div class="detail-container">
                <head-bar height="80"  :leftClick="popupOverPositonClick"></head-bar>
                <list :style="{height:scrollerHeight}">
                    <cell v-for="item in positionList">
                        <div @click="toUserInfo(item)" style="justify-content: center;align-items: flex-start;padding-left: 20px;height: 80px;border-bottom-width: 1px;border-bottom-color: #e2e2e2;">
                            <text style="font-size: 30px;">{{item.name}}</text>
                        </div>
                    </cell>
                </list>

            </div>
        </wxc-popup>

        <!--<prerender src="home.js"></prerender>-->

        <!--<prerender src="app/busi/tab/serial.js"></prerender>-->
        <!--<a href="demo/pagedemo.js" style="width: 100;height: 100;background-color: red;justify-content: center;align-items: center"><text>跳转</text></a>-->
    </div>

</template>

<style>

    .tab-text{
        color: white;
    }

    .tab {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }

    .bar-middle {
        align-items: center;
        justify-content: center;
        height: 100px;
        width: 750px;
        background-color: #01A65A;
        flex-direction: row;
        display: none;
    }

    .bar-middle-btn {
        width: 120px;
        height: 70px;
        background-color: #01A65A;
        align-items: center;
        justify-content: center;
    }

    .first-btn {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        border-top-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-top-color: white;
        border-left-color: white;
        border-bottom-color: white;
    }

    .second-btn {
        border-width: 1px;
        border-color: white;
    }

    .third-btn {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-width: 1px;
        border-bottom-width: 1px;
        border-right-width: 1px;
        border-top-color: white;
        border-right-color: white;
        border-bottom-color: white;
    }

    .active {
        background-color: #fff;
    }

    .active-text {
        color: #01A65A;
    }

</style>

<script>

    const modal = weex.requireModule('modal');
    import {WxcIndexlist, WxcSearchbar,WxcPopup,Utils} from 'weex-ui';
    import bottomMen from '../components/bottomMen.vue'
    import headBar from '../components/headBar.vue'
    import nw from '../network/nw.js'
    import ynav from '../network/nav.js'

    const device=weex.requireModule('device')
    import pinyin from 'js-pinyin'

    export default {
        components: {WxcIndexlist, WxcSearchbar,WxcPopup,headBar},

        data() {
            return {
                logoUrl: 'http://img1.vued.vanthink.cn/vued08aa73a9ab65dcbd360ec54659ada97c.png',
                target: 'World',
                showIndex: true,
                value: '',
                activeTab: 0,//默认活跃的切换栏
                sourceData: [],//通讯录源数据
                sectionData: [],//部门数据
                positonData: [],//职位数据
                tempData: [],//临时数据
                isSectionPropShow:false,
                sectionList:[],
                scrollerHeight:1344,
                isPositionPropShow:false,
                positionList:[]
            }
        },

        computed: {
            _activeTab() {
                return this.activeTab
            }
        },
        methods: {

            popupOverSectionClick(){
                this.isSectionPropShow = false
                this.sectionList = []
            },

            popupOverPositonClick(){
                this.isPositionPropShow = false
                this.positionList = []

            },
            onchange(p) {
                this.toast(p.activeTab)
            },
            update: function (e) {
                this.target = 'Weex'
            },
            change(i) {
                this.activeTab = i;

            },
            show() {

            },
            //切换栏目
            switchTab(index) {
                this.activeTab = index
            },
            wxcIndexlistItemClicked(e) {
                ynav.pushParam('root:com/yx/user/userIndex.js',{userId:e.item.userId})
            },

            //用户信息首页
            toUserInfo(data){
                ynav.pushParam('root:com/yx/user/userIndex.js',{userId:data.userId})
            },

            //显示同部门人员
            showSectionUserList(e){
                this.sectionList = e.item.list
                this.isSectionPropShow = true
            },
            //显示同职位人员
            showPositionUsrList(e){
                this.positionList = e.item.list
                this.isPositionPropShow = true
            },

            wxcSearchbarInputOnInput(e) {

                this.value = e.value

                var data = this.tempData
                var arr = new Array()
                for (let i in data) {
                    var ele = data[i]
                    if (ele.name.indexOf(e.value) != -1) {
                        arr.push(ele)
                    }
                }

                this.activeTab = 1
                this.activeTab = 0

                Vue.set(this, 'sourceData', arr)

            },

            wxcSearchbarCancelClicked() {
                Vue.set(this, 'sourceData', this.tempData)
                this.value = ''

            },

            onLoad(){
                var self = this
                nw.postDefine('/app/system/addressBook/list', {
                    data: {},
                    success(res) {

                        var orgData = {}
                        orgData.normalList = new Array()

                        var existSection = {}//部门去重
                        var existPosition = {}//职位去重

                        for (let i in res) {
                            let eleData = {
                                name: res[i].userName,
                                pinYin: pinyin.getFullChars(res[i].userName),
                                py: pinyin.getCamelChars(res[i].userName),
                                groupName: res[i].sectionName,
                                groupId: res[i].groupNameId,
                                userId: res[i].userId,
                                stateCd: res[i].stateCd,
                                roleName: res[i].roleName,
                                roleId: res[i].roleId,
                                phone: res[i].phone,
                                position: res[i].position
                            }
                            self.sourceData.push(eleData)

                            if (res[i].sectionName) {

                                if(!existSection[res[i].sectionName]) {
                                    var sele = {
                                        name: res[i].sectionName,
                                        pinYin: pinyin.getFullChars(res[i].sectionName),
                                        py: pinyin.getCamelChars(res[i].sectionName),
                                        list:[eleData]
                                    }
                                    self.sectionData.push(sele)
                                    existSection[res[i].sectionName] = true
                                }else{
                                    for(let j in self.sectionData){
                                        var ele = self.sectionData[j]
                                        if(res[i].sectionName == ele.name) {
                                            ele.list.push(eleData)
                                            break
                                        }
                                    }
                                }


                            }


                            if (res[i].position ) {

                                if(!existPosition[res[i].position]) {
                                    var pele = {
                                        name: res[i].position,
                                        py: pinyin.getCamelChars(res[i].position),
                                        pinYin: pinyin.getFullChars(res[i].position),
                                        list:[eleData]
                                    }
                                    self.positonData.push(pele)
                                    existPosition[res[i].position] = true
                                }else{
                                    for(let j in self.positonData){
                                        var ele = self.positonData[j]
                                        if(ele.name == res[i].position){
                                            ele.list.push(eleData)
                                            break
                                        }
                                    }
                                }



                            }


                        }

                        self.tempData = self.sourceData

                    }
                })
            }
        },

        created: function () {
            this.scrollerHeight = Utils.env.getScreenHeight() - 130

        },
        mounted() {
            if (weex.config.env.platform.toLowerCase() == 'android') {
                this.onLoad()
            }
        }
    }
</script>